<template>
	<v-content ref="content" background="#f6f6f6" single>
		<v-header title="意见反馈" back background="#fff"></v-header>
		<div class="container">
			<div class="tip">请选择你在闪退或卡顿、界面异常中遇到的问题</div>
			
			<div class="section">
				<div class="section-title">反馈类型</div>
				<div class="type-list">
					<div
						class="type-item"
						:class="{ active: type == item.code }"
						@click="onchangeType(item.code)"
						v-for="item in typeList"
						:key="item.code"
					>
						{{ item.name }}
					</div>
				</div>
			</div>
			
			<div class="section">
				<div class="section-title">问题/意见描述</div>
				<div class="textarea-wrapper">
					<textarea
						v-model="form.content"
						placeholder-style="color:#bebebe"
						placeholder="请填写10字以上的问题描述，以便我们更好地帮助您解决问题"
						maxlength="200"
						@input="onContentChange"
					></textarea>
					<div class="word-count" :class="{ warn: form.content.length > 180 }">
						{{ form.content.length }}/200
					</div>
				</div>
			</div>
			
			<div class="section">
				<div class="section-title">联系方式(选填)</div>
				<div class="input-wrapper">
					<input
						v-model="form.contactWay"
						placeholder-style="color:#bebebe"
						placeholder="请填写您的联系方式，以便于我们与您联系"
					>
				</div>
			</div>
			
			<button type="primary" class="submit-btn" @click="submitForm" :disabled="!canSubmit">
				提交反馈
			</button>
		</div>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			type: 1,
			typeList: [],
			form: {
				content: "",
				contactWay: "",
			},
			minLength: 10,
			isSubmitting: false,
		}
	},
	computed: {
		canSubmit() {
			// 内容必须大于等于最小长度，且不在提交中状态
			return this.form.content.length >= this.minLength && !this.isSubmitting
		},
	},
	methods: {
		init() {
			this.getTypeList()
		},
		onchangeType(type) {
			this.type = type
		},
		onContentChange() {
			// 可以在这里添加实时校验逻辑
		},
		async getTypeList() {
			try {
				const data = await this.$axios.get("/api/system/dict/listByCode?code=feedback")
				this.typeList = data
			} catch (error) {
				console.error('获取反馈类型失败:', error)
				// 提供默认类型列表作为备用
				this.typeList = [
					{ code: 1, name: '功能建议' },
					{ code: 2, name: 'Bug反馈' },
					{ code: 3, name: '界面问题' },
					{ code: 4, name: '其他问题' }
				]
			}
		},
		async submitForm() {
			if (!this.canSubmit) return
			
			this.isSubmitting = true
			try {
				await this.$axios.post("/api/system/feedback/save", {
					content: this.form.content, // 反馈内容
					typeId: this.type, // 反馈类型
					contactWay: this.form.contactWay, //联系方式
				})
				this.toPage("/pages/mine/feedbackSumbit")
			} catch (error) {
				console.error('提交反馈失败:', error)
				uni.showToast({
					title: error.message || '提交失败，请稍后重试',
					icon: "none",
					duration: 2000
				})
			} finally {
				this.isSubmitting = false
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.container {
	padding: 0 32rpx 60rpx 32rpx;
}

.tip {
	margin-top: 24rpx;
	padding: 20rpx 24rpx;
	background-color: #fdfdc9;
	color: #ff6b35;
	font-size: 26rpx;
	border-radius: 12rpx;
	line-height: 1.5;
	margin-bottom: 32rpx;
}

.section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 24rpx;
}

.type-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.type-item {
	padding: 20rpx 32rpx;
	border: 2rpx solid #e5e5e5;
	border-radius: 32rpx;
	font-size: 26rpx;
	color: #666;
	background-color: #f8f8f8;
	transition: all 0.3s ease;
	line-height: 1;

	&:active {
		scale: 0.98;
	}

	&.active {
		background-color: #476bff;
		color: #fff;
		border-color: #476bff;
	}
}

.textarea-wrapper {
	position: relative;
}

::v-deep textarea {
	width: 100%;
	height: 220rpx;
	padding: 24rpx;
	background-color: #f8f8f8;
	border: none;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	resize: none;
	box-sizing: border-box;
	line-height: 1.5;
}

.input-wrapper {
	width: 100%;
}

::v-deep input {
	width: 100%;
	height: 96rpx;
	padding: 0 24rpx;
	background-color: #f8f8f8;
	border: none;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
}

.word-count {
	position: absolute;
	bottom: 20rpx;
	right: 24rpx;
	font-size: 24rpx;
	color: #999;
}

.word-count.warn {
	color: #ff6b35;
}

.submit-btn {
	margin-top: 40rpx;
	height: 96rpx;
	background-color: #476bff;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 48rpx;
	border: none;
	transition: all 0.3s ease;
	letter-spacing: 2rpx;

	&:active {
		scale: 0.98;
		background-color: #3a58d4;
	}

	&[disabled] {
		background-color: #c8c8c8;
		color: #fff;
		cursor: not-allowed;
	}
}
</style>
